<!-- 即时通讯训练项目,登录页 -->
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <meta name = "viewport" content = "width = device-width,initial-scale = 1.0, maximum-scale = 1.0, user-scalable = 0" />
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
            height: 100%;
            overflow: hidden;
        }
        body{
            overflow-y: hidden;
            overflow-x: hidden;
        }
        #app{
            width: 100%;
            height: 100%;
            background: -webkit-linear-gradient(top , #F49999, #f8cccc); /* Safari 5.1 - 6.0 */
        }
        .user_input_sec {
            width: 100%;
            top: 215px;
            height: 250px;
            position: absolute;
        }
        .user_input_sec>.username_box{
            position: absolute;
            left: 50%;
            width: 70%;
            margin-left: -35%;
            height: 30px;
            border-radius: 5px;
            background-color: #f7d1d1;
            border:1px solid #fff;
            -webkit-box-shadow: 10px 10px 10px rgba(168, 130, 130, 0.5);
        }
        .user_input_sec>.username_box>.username_input{
            width: 100%;
            background-color: #f7d1d1;
            border:0;
            height: 30px;
            text-align: center;
        }

        .user_input_sec>.password_box{
            position: absolute;
            top:50px;
            left: 50%;
            width: 70%;
            margin-left: -35%;
            height: 30px;
            border-radius: 5px;
            background-color: #f7d1d1;
            border:1px solid #fff;
            -webkit-box-shadow: 10px 10px 10px rgba(168, 130, 130, 0.5);
        }
        .user_input_sec>.password_box>.password_input{
            width: 100%;
            background-color: #f7d1d1;
            border:0;
            height: 30px;
            text-align: center;
        }

        .user_input_sec>.submit_box{
            position: absolute;
            top:140px;
            left: 50%;
            width: 70%;
            margin-left: -35%;
            height: 30px;
            border-radius: 5px;
            background-color: #888;
            border:1px solid #fff;
            -webkit-box-shadow: 10px 10px 10px rgb(155, 155, 200);
        }
        .user_input_sec>.submit_box>.submit_input{
            width: 100%;
            background-color: #b8b8e4;
            border:0;
            height: 30px;
            text-align: center;
            color: #fff;
        }

        .user_input_sec>.submit_box>.submit_input:active{
            width: 100%;
            background-color: #aaaaff;
            border:0;
            height: 30px;
            text-align: center;
            color: #fff;
        }
        .bot_text{
            position: absolute;
            color:#eee;
            width: 100%;
            text-align: center;
            top:200px;
            font-size: 14px;

        }
        .userimg{
            position: absolute;
            left:50%;
            border-radius: 50%;
            -webkit-box-shadow: 10px 10px 10px rgba(0,0,0,.5);
        }

    </style>
</head>
<body>

<div id="app">
    <section class="user_input_sec" id="userInfo">
        <div class="username_box">
            <input class="username_input" type="text" placeholder="邮箱/手机号/帐号" >
        </div>
        <div class="password_box">
            <input class="password_input" type="password" placeholder="请输入密码" >
        </div>
        <div class="submit_box" >
            <button class="submit_input" id="login" >登录</button>
        </div>

        <div class="bot_text">
            还没有账号?
            <a href="javascript:void(0)">注册</a>
        </div>
    </section>
</div>
<script src="http://itphy.com/cdn/jquery/jquery.js"></script>
<script src="/js/dialog.js"></script>
<script>
    $(function (){
        $("#login").click(function (){
            let userName = $("#userInfo").find("input:eq(0)").val();
            let password = $("#userInfo").find("input:eq(1)").val();
            if(userName && password){
                commonAjax({type:"post",url:"/login"},{
                    accountNo: userName,
                    password: password
                },null,r=>{
                    if(r.code*1==200){
                        localStorage.token=r.data;
                        alert("登录成功！")
                        location.href="/dialog"
                    }else {
                        alert("登录失败！")
                    }
                })

            }else{
                alert("账号密码必填")
            }
        })
    })
</script>
</body>
</html>
